GridheimFormulaBar

The Professional Formula Editing Interface 🔥

Overview

GridheimFormulaBar is the sophisticated formula editing component that provides Excel/Google Sheets-like formula input capabilities. This React/TypeScript component modernizes the legacy shedFormulaBarView.js and formulaParser.js patterns into a professional, feature-rich formula editing interface.

Key Features

• Formula Input - Advanced text input with syntax highlighting
• Cell Address Display - Shows current cell address (A1, B5, etc.)
• Real-time Validation - Instant formula syntax checking
• Auto-completion - 40+ Excel functions with smart suggestions
• Cell Reference Highlighting - Visual formula component identification
• Function Insertion - Professional fx button and function picker
• Keyboard Shortcuts - Full Excel/Sheets-compatible key bindings
• RTK Query Integration - Seamless cell updates through ThorAPI

Usage

import { GridheimFormulaBar } from '@/components/Gridheim';
import { Cell } from '@thor/model';

const MySpreadsheet = () => {
  const [selectedCell, setSelectedCell] = useState<Cell>();
  const [selectedAddress, setSelectedAddress] = useState('A1');

  return (
    <GridheimFormulaBar
      selectedCell={selectedCell}
      selectedAddress={selectedAddress}
      sheetId="sheet-1"
      workbookId="workbook-1"
      onCellUpdate={(cell) => console.log('Cell updated:', cell)}
      onEditStart={(address) => console.log('Editing:', address)}
      onEditEnd={(address) => console.log('Finished editing:', address)}
      onCellReference={(address) => setSelectedAddress(address)}
    />
  );
};

Props

Prop	Type	Required	Description
selectedCell	Cell	No	Currently selected cell data
selectedAddress	string	No	Cell address (e.g., "A1", "B5")
sheetId	string	No	Sheet ID for formula context
workbookId	string	No	Workbook ID for formula context
readonly	boolean	No	Whether the formula bar is readonly
onCellUpdate	(cell: Cell) => void	No	Callback when cell is updated
onEditStart	(address: string) => void	No	Callback when editing starts
onEditEnd	(address: string) => void	No	Callback when editing ends
onCellReference	(address: string) => void	No	Callback when cell reference clicked

Auto-completion System

Comprehensive function auto-completion with 40+ Excel functions:

• Math: SUM, AVERAGE, COUNT, COUNTA, MAX, MIN, ROUND, ABS, SQRT, POWER
• Logical: IF, IFERROR, AND, OR, NOT, TRUE, FALSE
• Text: CONCATENATE, LEFT, RIGHT, MID, LEN, UPPER, LOWER, PROPER, TRIM, SUBSTITUTE
• Lookup: VLOOKUP, HLOOKUP, INDEX, MATCH
• Date/Time: TODAY, NOW, DATE, TIME, YEAR, MONTH, DAY
• Conditional: COUNTIF, COUNTIFS, SUMIF, SUMIFS

Syntax Highlighting

Real-time visual formula parsing with color-coded elements.

Achievement Status: ✅ COMPLETE

GridheimFormulaBar successfully modernizes 400+ lines of legacy formula editing JavaScript into a professional React/TypeScript interface with advanced auto-completion, syntax highlighting, and full ThorAPI integration.

This component provides the complete professional formula editing experience! 🔥⚡